<!DOCTYPE html>
<html>
<head>
    <title>图片展示测试</title>
</head>
<body>
<div id="app">
    <button @click="loadImages">加载图片</button>
    <div v-for="(imageUrl, index) in imageUrls" :key="index">
        <img :src="imageUrl" alt="Image" />
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            imageUrls: [], // 存储图片URL的数组
        },
        methods: {
            loadImages() {
                // 替换为您的图片URL数组
                const imageUrls = [
                    'https://onlineshoplzk.oss-cn-beijing.aliyuncs.com/image/hello1.jpg',
                    'https://onlineshoplzk.oss-cn-beijing.aliyuncs.com/image/hello10.jpg',
                    'https://onlineshoplzk.oss-cn-beijing.aliyuncs.com/image/hello11.jpg',
                    // 添加更多的图片URL
                ];

                // 清空现有的图片数组
                this.imageUrls = [];

                // 遍历URL数组，下载并添加图片URL
                imageUrls.forEach((imageUrl) => {
                    const image = new Image();
                    image.src = imageUrl;
                    image.onload = () => {
                        this.imageUrls.push(imageUrl);
                    };
                });
            },
        },
    });
</script>
</body>
</html>
